import DefaultImage from '@/asset/default-image.png';
import ShopActionButton from '@/components/admin/shop-action-button';
import ErrorComp from '@/components/common/error-comp';
import ImagePreview from '@/components/common/image-preview';
import LeftToRightView from '@/components/common/motion/left-to-right-view';
import QueryImage from '@/components/common/query-image';
import ShopStatusBadge from '@/components/shop/shop-status-badge';
import { getShopById } from '@/service/query/shop';
import dayjs from 'dayjs';
import Link from 'next/link';
import { z } from 'zod';

export const metadata = {
  title: '商铺详情',
};

const paramSchema = z.object({
  id: z.coerce.number().int().positive(),
});

export default async function Page({
  params,
}: { params: Promise<{ id: string }> }) {
  const paramsRes = paramSchema.safeParse(await params);
  if (!paramsRes.success)
    return <ErrorComp message="参数错误" backPath="/admin/shop" />;

  const { result, error } = await getShopById(paramsRes.data.id);
  if (error)
    return <ErrorComp message={error.message} backPath="/admin/shop" />;

  return (
    <LeftToRightView>
      <div className="p-5 px-10 rounded-lg bg-background space-y-8">
        <div className="text-xl font-bold">商铺详情</div>
        {['reviewing', 'warning', 'normal'].includes(result.status) && (
          <div className="space-y-2">
            <div className="font-bold">商铺操作</div>
            <ShopActionButton shopData={result} />
          </div>
        )}
        <div className="space-y-4">
          <div className="font-bold">基本信息</div>
          {[
            {
              label: '商铺ID：',
              value: result.id,
            },
            {
              label: '名称：',
              value: result.name,
            },
            {
              label: '商铺简介：',
              value: result.description,
            },
            {
              label: '地址：',
              value: result.address,
            },
            {
              label: '联系方式：',
              value: result.contactPhone,
            },
            {
              label: '注册时间：',
              value: dayjs(result.createdAt).format('YYYY-MM-DD HH:mm:ss'),
            },
            {
              label: '状态：',
              value: (
                <div key={result.id} className="space-x-4">
                  <ShopStatusBadge status={result.status} />
                  {result.status === 'rejected' && (
                    <span className="text-xs">
                      驳回理由：{result.rejectReason}
                    </span>
                  )}
                  {result.status === 'warning' && (
                    <span className="text-xs">
                      警告理由：{result.warningReason}
                    </span>
                  )}
                </div>
              ),
            },
          ].map(({ label, value }) => (
            <div key={label} className="flex items-center ">
              <div className="w-0 text-nowrap">{label}</div>
              <div className="text-sm ml-32">{value}</div>
            </div>
          ))}
        </div>
        <div className="space-y-4">
          <div className="font-bold">商铺图片</div>
          <div className="flex gap-2">
            {result.imageKeys.map((key) => (
              <ImagePreview
                key={key}
                imageKey={key}
                button={
                  <QueryImage
                    key={key}
                    imageKey={key}
                    defaultImage={DefaultImage}
                    wrapperClassName="w-32 h-24"
                    imgClassName="w-full h-full object-cover"
                  />
                }
              />
            ))}
          </div>
        </div>
        <div className="space-y-4">
          <div className="font-bold">商铺外卖</div>
          {result.products.map((p) => (
            <div key={p.id} className="flex gap-2">
              <QueryImage
                imageKey={p.imageKeys[0]}
                defaultImage={DefaultImage}
                wrapperClassName="rounded-lg w-40 h-20 shrink-0"
                imgClassName="rounded-lg w-full h-full object-cover"
              />
              <div className="relative">
                <Link href={`/admin/shop/product/${p.id}`}>
                  <div className="text-base font-bold">{p.name}</div>
                  <div className="text-xs text-muted-foreground line-clamp-2">
                    {p.description}
                  </div>
                  <div className="text-lg font-bold absolute bottom-0">
                    {p.price}元
                  </div>
                </Link>
              </div>
            </div>
          ))}
        </div>
      </div>
    </LeftToRightView>
  );
}
